<template>
<div class="tabbar-footer">
  <van-tabbar v-model="active" :fixed="false" :zIndex="100" active-color="#ff6457">
    <van-tabbar-item icon=" iconfont icona_home" title to="/home">魔方首页</van-tabbar-item>
    <van-tabbar-item icon=" iconfont icona_transaction" to="/trading">交易大厅</van-tabbar-item>
    <van-tabbar-item icon=" iconfont icona_play" to="/game/index">魔方财富</van-tabbar-item>
    <van-tabbar-item icon=" iconfont icona_my" to="/user">个人中心</van-tabbar-item>
  </van-tabbar>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      active: this.$route.meta.tabbars
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {},
  //执行方法
  methods: {},
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.tabbar-footer{
  /*position:fixed;*/
  overflow: hidden;
  // border: 1px solid red;
  position: fixed;
  bottom: 0;
  left:0;
  height: 50px;
  width: 100%;
  z-index: 9999;
  .van-tabbar{
    position: fixed;
  }
}
</style>
